<template>
  <card :header="false">
    <!-- <Dialog ref="Dialog" @on-edit-submit="queryListByPage" /> -->
    <template #filter>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="编码">
          <el-input v-model="searchForm.strglobalsettingscode" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="searchForm.strglobalsettingsname" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </template>
    <div class="tabList">
      <ul>
        <li
          v-for="(item,index) in tabList"
          :key="index"
          :class="{active:activeBtn === index}"
          @click="goAnthor(item.lngglobalsettingsclassid,index)"
        >{{ item.strglobalsettingsclassname }}</li>
      </ul>
    </div>
    <div class="tabcon">
      <el-table
        ref="table"
        :data="tableData"
        border
        stripe
        :height="tableHeight"
        :header-cell-style="{'background':'#F5F4F7'}"
      >
        <el-table-column type="index" label="序号" width="60" :index="indexMethod" align="center" />
        <el-table-column prop="strglobalsettingscode" label="编码" width="180" />
        <el-table-column prop="strglobalsettingsname" label="名称" min-width="200" />
        <el-table-column fixed="right" label="启用/停用" width="100px" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.blnisinactive"
              active-color="#3FBEB8"
              inactive-color="#B7B7B7"
              :active-value="0"
              :inactive-value="1"
              @change="changeState($event,scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="paging.total > 0"
        background
        :current-page.sync="paging.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="paging.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paging.total"
        @size-change="queryListByPage"
        @current-change="queryListByPage"
      />
    </div>
  </card>
</template>
<script>
import {
  queryList,
  editBudgetOption,
  getGlobalSettingsClass
} from '@/api/system/global-setting/global-param'
import calculateCommonTableHeight from '@/layout/mixin/calculateCommonTableHeight'

export default {
  mixins: [calculateCommonTableHeight],
  data() {
    return {
      tableData: [],
      tableKey: 0,
      paging: {
        total: 2,
        page: 1,
        size: 10
      },
      searchForm: {
        lngglobalsettingsclassid: '',
        strglobalsettingscode: '',
        strglobalsettingsname: ''
      },
      tabList: [],
      activeBtn: 0,
      autocode: ''
    }
  },
  created() {
    this.getGlobalSettingsClass()
  },
  methods: {
    goAnthor(val, index) {
      this.activeBtn = index
      this.searchForm.lngglobalsettingsclassid = val
      this.queryListByPage(this.searchForm)
    },
    indexMethod(index) {
      index = index + 1 + (this.paging.page - 1) * this.paging.size
      return index
    },
    // 查询按钮
    searchSubmit() {
      this.paging.page = 1
      this.queryListByPage(this.searchForm)
    },
    // 全局参数设置模块
    getGlobalSettingsClass() {
      getGlobalSettingsClass().then(res => {
        if (res.code === 20000) {
          this.tabList = res.data
          if (res.data.length) {
            this.searchForm.lngglobalsettingsclassid =
              res.data[0].lngglobalsettingsclassid
            this.queryListByPage(this.searchForm)
          }
        }
      })
    },
    // 数据列表
    queryListByPage(row) {
      this.$nextTick(() => {
        queryList(this.searchForm, this.paging.page, this.paging.size).then(
          res => {
            if (res.code === 20000) {
              this.tableData = res.data.rows
              this.paging.total = parseInt(res.data.total)
            } else {
              this.tableData = []
              this.paging.total = 0
            }
          }
        )
      })
    },
    // 启用停用方法
    changeState(e, row) {
      editBudgetOption(row.lngglobalsettingsid, row.blnisinactive)
        .then(res => {
          if (res.code === 20000) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
            // this.queryListByPage()
          } else {
            row.blnisinactive = e === 1 ? 0 : 1
          }
        })
        .catch(() => {
          row.blnisinactive = e === 1 ? 0 : 1
        })
    }
  }
}
</script>
<style scoped>
.search-form-inline {
  padding: 10px 0 0;
}
.tabList {
  float: left;
}
.tabList li {
  width: 160px;
  height: 40px;
  background: #f5f5f5;
  border: 1px solid #e9e9eb;
  text-align: center;
  line-height: 40px;
  margin-bottom: 15px;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.tabList li.active {
  background: #00a99d;
  color: #fff;
}
.tabcon {
  padding-left: 175px;
}
.tabcon .el-table--small td {
  height: 39px;
}
</style>
